import { FC, memo } from "react";
import { Image, View, Text } from "@tarojs/components";
import { DynamicColors, GStyleSheet } from "@/utils/DarkMode";

const dsytle = GStyleSheet.create({
  tipItem: {
    display: "flex",
    alignItems: "center",
    padding: "0rpx 0rpx 24rpx",
    boxSizing: 'border-box'
  },
  icon: {
    width: "40rpx",
    height: "40rpx",
  },
  text: {
    marginLeft: "10px",
    fontSize: "28rpx",
    color: DynamicColors.normalTextGaryColor
  },
});

interface IProps {
  icon: string;
  text: string;
}

const TipItem: FC<IProps> = ({ icon, text }) => {
  const styles = dsytle.useDynamicStyle();
  return (
    <View style={styles.tipItem}>
      {icon && <Image style={styles.icon} src={icon} mode='aspectFit' />}
      <Text style={styles.text}>{text}</Text>
    </View>
  );
};

export default memo(TipItem);
